<template>
  <div class="list">
    <span class="index">推荐</span>
    <router-link to="/find/recommend">
      <div :class="{ choosed: choosed == 'find' }">
        <span> <img class="icon" src="../assets/music.png" /> 发现音乐 </span>
      </div>
    </router-link>
    <router-link to="/personal/">
      <div :class="{ choosed: choosed == 'personal' }">
        <span> <img class="icon" src="../assets/fm.png" />私人FM </span>
      </div>
    </router-link>
    <router-link to="/mv/">
      <div :class="{ choosed: choosed == 'mv' }">
        <span> <img class="icon" src="../assets/mv.png" />MV </span>
      </div>
    </router-link>
    <router-link to="/friend/">
      <div :class="{ choosed: choosed == 'friend' }">
        <span> <img class="icon" src="../assets/friend.png" />朋友 </span>
      </div>
    </router-link>
    <span class="index">我的音乐</span>

    <router-link to="/singer/">
      <div :class="{ choosed: choosed == 'singer' }">
        <span> <img class="icon" src="../assets/singer.png" />我的歌手 </span>
      </div>
    </router-link>
    <router-link to="/station/">
      <div :class="{ choosed: choosed == 'station' }">
        <span> <img class="icon" src="../assets/station.png" />我的专辑 </span>
      </div>
    </router-link>
    <!-- <span class="index">创建的歌单</span> -->
    <!--  根据用户循环 -->
    <span class="index" @click="ll" :title="show ? '收起' : '展开'">
      <span>创建的歌单</span>
      <span class="sc">{{ show ? "∨" : "＞" }}</span>
    </span>

    <router-link :to="'/mylove/'">
      <div v-if="show" :class="{ choosed: choosed == 'mylove' }">
        <span>
          <img class="icon" src="../assets/list.png" />
          我喜欢的音乐
        </span>
      </div>
    </router-link>

    <span class="index" @click="lls" :title="shows ? '收起' : '展开'">
      <span>收藏的歌单</span>
      <span class="sc">{{ shows ? "∨" : "＞" }}</span>
    </span>
    <router-link
      :to="'/playlist/' + item.id"
      v-for="item in gedan"
      :key="item.id"
    >
      <div v-if="shows" :class="{ choosed: choosed == item.id }">
        <span>
          <img class="icon" src="../assets/list.png" />
          {{ item.name }}
        </span>
      </div>
    </router-link>
    <div v-if="playlist.length" class="musicbox" @click="showals">
      <img :src="img" alt />
      <div class="hoverboxs"></div>
      <div class="musicinfo">
        <span>{{ songName }}</span>
        <p>{{ name }}</p>
      </div>
      <div class="love">
        <img
          @click.stop="love($event)"
          v-if="!loves.some((a) => a.id == Nowplay)"
          src="../assets/love.png"
        />
        <img @click.stop="love($event)" v-else src="../assets/love-s.png" />
        <!-- <img @click.stop="love($event)" src="../assets/love.png" alt /> -->
        <img src="../assets/zf.png" alt />
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import loveS from "@/assets/love-s.png";
import love from "@/assets/love.png";
export default {
  data() {
    return {
      show: true,
      shows: true,
      songName: "", //歌曲名字
      name: "", //歌手name
      img: "", //图片
    };
  },
  props: {
    choosed: {
      type: String,
      required: true,
      default: "find",
    },
  },
  methods: {
    ll() {
      this.show = !this.show;
    },
    lls() {
      this.shows = !this.shows;
    },
    love(e) {
      let mylove = {
        id: this.Nowplay,
        songname: this.songName,
        name: this.name,
        zj: this.name,
        time: 259000,
      };
      if (e.target.src.split("/")[4] == loveS.split("/")[1]) {
        this.$alert({
          title: "确定将选中的歌曲从我喜欢的音乐中删除?",
          ok: () => {
            e.target.src = love;
            this.$store.commit("dellove", this.Nowplay);
            this.$box("取消喜欢成功");
          },
        });
      } else {
        e.target.src = loveS;
        this.$store.commit("addlove", mylove);
        this.$box();
      }
    },
    showals() {
      this.$store.commit("showsong");
    },
    getsong(val) {
      this.$api.song({ ids: val }).then((res) => {
        this.songName = res[0].name;
        this.name = res[0].al.name;
        this.img = res[0].al.picUrl;
      });
    },
  },
  computed: {
    ...mapState(["gedan", "Nowplay", "history", "playlist", "loves"]),
  },
  mounted() {
    this.Nowplay && this.getsong(this.Nowplay);
  },
  watch: {
    Nowplay(val) {
      val && this.getsong(val);
    },
  },
};
</script>
<style lang="less" scoped>
.list {
  height: 100%;
  background-color: rgb(245, 245, 247);
  border-right: 1px solid rgb(225, 225, 226);
  position: relative;

  .index {
    display: flex;
    height: 30px;
    text-indent: 10px;
    color: #7d7d7d;
    font-size: 14px;
    line-height: 30px;
    margin-bottom: 2px;
    justify-content: space-between;

    .sc {
      font-size: 16px;
      margin-right: 5px;
    }
  }

  div:not(.musicbox) {
    padding-left: 20px;
    height: 30px;
    line-height: 30px;
    opacity: 0.8;
    position: relative;

    span {
      display: flex;
      align-items: center;
      font-size: 13px;
      color: black;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      .icon {
        width: 20px;
        height: 20px;
        vertical-align: top;
        margin-right: 13px;
        margin-top: 2px;
      }
    }

    &:hover {
      opacity: 1;
      cursor: pointer;
    }
  }

  .choosed {
    background-color: rgb(230, 231, 234);
    opacity: 1;
    color: black;

    img {
      width: 20px;
      height: 20px;
      vertical-align: top;
      margin-right: 13px;
      margin-top: 2px;
    }

    &::before {
      position: absolute;
      left: 0px;
      top: 0px;
      content: "";
      display: inline-block;
      width: 5px;
      height: 30px;
      background-color: rgb(198, 47, 47);
    }
  }
  .musicbox {
    height: 60px;
    width: 100%;
    border-top: 1px solid #e1e1e2;
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    .musicinfo {
      height: inherit;
      padding-left: 0;
      font-size: 14px;
      text-align: left;
      width: 100%;
      overflow: hidden; //超出的文本隐藏
      text-overflow: ellipsis; //溢出用省略号显示
      white-space: nowrap; //溢出不换行
      span { 
        margin-top: 5px;
        margin-bottom: -8px;
      }
    }
    .hoverboxs {
      width: 45px;
      height: 45px;
      background-color: black;
      opacity: 0.5;
      position: absolute;
      top: 8px;
      left: 5px;
      display: none;
    }
    img {
      width: 45px;
      height: 45px;
      margin: 8px 5px;
      &:hover + .hoverboxs {
        display: block;
      }
    }

    .love {
      display: flex;
      flex-direction: column;
      img {
        width: 20px;
        height: 20px;
        &:last-child {
          width: 15px;
          height: 15px;
          margin: 5px 0 0 8px;
        }
      }
    }
  }
}
</style>
